<template>
    <div class="row justify-content-md-center upload-files-panel">
        <div class="col-6" v-if="!done">
            <form @submit.prevent="handleFromSubmit">
                <fieldset :disabled="processing">
                <div class="form-group">
                    <vue-plupload ref="software-package" @added="handleAdded" @init="handleIpaInit" @uploaded="handleIPAUploaded"
                                  text="IPA file"></vue-plupload>
                </div>
                <div class="form-group">
                    <vue-plupload ref="plist" @init="handlePlistInit" @added="handleAdded" @uploaded="handlePlistUploaded"
                                  text="Plist file"></vue-plupload>
                </div>
                <div class="form-group">
                    <vue-plupload ref="full-size-image" @added="handleAdded" @init="handleImageInit" @uploaded="handleFullImageUploaded"
                                  text="Full Size Image"></vue-plupload>
                </div>
                <div class="form-group">
                    <vue-plupload ref="display-image" @added="handleAdded" @init="handleImageInit" @uploaded="handleImageUploaded"
                                  text="Display Image"></vue-plupload>
                </div>
                <div class="form-group">
                    <input type="email" v-model="email" class="form-control" placeholder="Email for notifying" />
                </div>
                <div class="form-group" v-if="readySubmit">
                    <button type="submit" class="btn btn-outline-primary btn-block">Submit</button>
                </div>
                </fieldset>
            </form>
        </div>

        <div class="row col-12 justify-content-md-center clearfix" v-if="failed || processing">
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <pre v-text="log"></pre>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6" v-if="done">
            <div class="card">
                <div class="card-body">
                    <a :href="href" target="_blank" class="btn btn-success">Open APP Page</a>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import service from "../service/IPA2S3Service"
import PluploadBtn from "./vue-plupload"

export default {
    name: "UploadFiles",

    components:{
        "vue-plupload": PluploadBtn
    },

    data() {
        return {
            plist: {
                "software-package": "",
                "full-size-image": "",
                "display-image": "",
                "plist": "",
            },
            email: "",
            processing: false,
            failed: false,
            done: false,
            log: "",
            href: ""
        }
    },

    computed:{
        readySubmit() {
            return Object.values(this.plist).reduce((last, item) => {
                return last && item.length > 0;
            }, true);
        }
    },

    methods:{
        handleAdded(up, files) {
            let file = files[0];
            if (file) {
                service.getOSSParams(file.name)
                    .then((params) => {
                        up.setOption({
                            url: params.host,
                            multipart_params: params
                        });
                        up.start();
                    })
            }
        },
        handleResult(up, result, type) {
            let url = up.getOption("url");
            try {
                let res = JSON.parse(result.response);
                if (res && res.status) {
                    let key = `http:${url}/${res.data.filename}`;
                    this.plist[type] = key;
                }
            } catch (e) {
                this.$refs[type].setErrorText("upload error!")
            }

        },
        handlePlistUploaded(uploader, file, result) {
            this.handleResult(uploader, result, "plist");
        },
        handleIPAUploaded(uploader, file, result) {
            this.handleResult(uploader, result, "software-package");
        },
        handleImageUploaded(uploader, file, result) {
            this.handleResult(uploader, result, "display-image");
        },
        handleFullImageUploaded(uploader, file, result) {
            this.handleResult(uploader, result, "full-size-image");
        },
        handlePlistInit(up) {
            up.setOption("filters", {
                mime_types: [
                    { title : "Plist files", extensions : "plist" }
                ],
                max_file_size : '1mb'
            })
        },
        handleImageInit(up) {
            up.setOption("filters", {
                mime_types: [
                    { title : "Image files", extensions : "jpg,gif,png" }
                ],
                max_file_size : '1mb'
            })
        },
        handleIpaInit(up) {
            up.setOption("filters", {
                mime_types: [
                    { title : "IPA files", extensions : "ipa" }
                ],
                max_file_size : '1500mb'
            })
        },
        handleFromSubmit() {
            this.processing = true;

            service.submitOSS(this.plist, this.email)
                .then((id)=> {
                    return Promise.resolve(service.getResult(id));
                })
                .then((checker) => {
                    checker
                        .onProcess((log) => {
                            this.log = log;
                        })
                        .onDone((url) => {
                            this.done = true;
                            this.processing = false;
                            this.failed = false;
                            this.href = url;
                        })
                        .onFailed((log) => {
                            this.done = false;
                            this.processing = false;
                            this.failed = true;
                            this.log = log;
                        })
                });
        }
    }
}
</script>